<template>
  <div class="setting">
    <!-- tabs
   组件名：el-tabs  v-model:对应子项的name的值
             el-tab-pane
                    label:标题
                    name:选中该项后的值
                    默认插槽

  el-table
        data:表格的数据
       el-table-column  每一列
           label:当前列的标题
           prop:当前列对应的字段名
           width:设置宽度
      序号：
         el-table-column  type="index"
      自定义栏
        el-table-column  作用域插槽
          template v-slot="{$index,row}"
          $index:索引下标
          row:当前行数据

          forEach((item,index)=>{
            item===row
            index===$index
          })

  分页组件
     组件名：el-pagination
             current-page：默认页码
             page-sizes：页容量选项
             page-size:默认页容量
             layout：功能布局
             total：总条数
          @size-change： 页容量改变后的回调函数
          @current-change：页码改变后的回调函数

 查：
   1：定义api
   2:导入api
   3:进入页面就调用api获取数据
   4：存储并渲染
   5：将分页组件与api调用关联

 增
    1：创建新增弹框组件
    2：在页面使用
    3：点击新增打开弹框组件
    4：表单验证处理
    5：定义新增api
    6:导入api
    7:调用新增api
    8:调用完成
       a:提示一下
       b:清空表单数据与表单验证
       c:关闭弹框
       d:刷新父级列表数据

  删：
    1：点击删除按钮弹出确定框
    2：定义删除api
    3:导入删除api
    4:确定框点击确定后调用删除api
    5:调用成功：
       a:提示
       b:刷新列表数据

   改：
    1：点击修改打开弹框
    2：在新增弹框组件内加入mode:add/edit
    3:如果点击新增修改mode值为add,如果点击修改，mode=edit
    4:数据回显（数据要深拷贝）
    5：标题调整
    6：表单验证如果有要调整的还需要调整
    7：定义修改api
    8:导入
    9：分场景调用修改api
    10:修改成功：
       a:提示
       b:关闭弹框
       c:刷新父级列表数据

 -->
    <el-card>
      <el-tabs>
        <el-tab-pane label="角色管理" lazy>
          <el-button
            type="primary"
            style="margin-top: 20px"
            @click="addEvent"
          >+ 新增角色</el-button>
          <el-table :data="list">
            <!-- <el-table-column label="序号" type="index" /> -->
            <el-table-column label="序号">
              <template v-slot="{ $index }">
                <div>
                  {{ (page.page - 1) * page.pagesize + $index + 1 }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="角色名" prop="name" />
            <el-table-column label="描述" prop="description" />
            <el-table-column label="操作">
              <template v-slot="{ row }">
                <!--
                     分配权限
                        1:创建弹框组件
                        2：在父级使用
                        3：点击分配权限打开弹框组件
                             ref  v-model   .sync
                        4：获取权限数据列表并渲染
                            导入api封装一个方法获取树形数据
                            点击打开弹框时调用该方法
                        5：拿到当前角色所包含的权限数据并回显
                           a:当前点击项包含相应回显数据，直接赋值回显（可能需要深拷贝）
                           b:当前点击项不包含相应回显数据，定义接口获取数据
                        6：创建修角色改权限数据的api
                        7:导入api
                        8:点击确定提交
                        9：提交完成
                            a:提示
                            b:关闭弹框
                            c:清除勾选项

                 -->
                <el-button
                  type="text"
                  @click="setClick(row.id)"
                >分配权限</el-button>
                <el-button type="text" @click="edit(row)">修改</el-button>
                <el-button type="text" @click="del(row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div style="text-align: right; padding-top: 30px">
            <!--
              el-pagination
                 this.$emit('update:currentPage',实参)
             -->
            <!-- js-cookie
            get(key):获取
            set(key,value):设置
            remove(key):删除
             -->

            <el-pagination
              :current-page.sync="page.page"
              :page-sizes="[1, 2, 5, 10, 100, 200, 300, 400]"
              :page-size.sync="page.pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-tab-pane>
        <el-tab-pane lazy label="公司信息">
          <SettingInfo />
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- 新增弹框组件
    父传子
    ref处理
       组件标签  ref  ="form"
       this.$refs.form
    -->
    <SettingAdd ref="add" @getData="getData" />
    <!-- 权限分配弹框组件 -->
    <!-- <PermissionSet ref="set" :is-show="show" @input="show = $event" /> -->
    <!-- <PermissionSet ref="set" v-model="show" /> -->
    <!-- <PermissionSet ref="set" :is-show="show" @update:isShow="show = $event" /> -->
    <PermissionSet ref="set" :is-show.sync="show" />
  </div>
</template>
<script>
import { sysRole, sysRoleDelete } from '@/api/setting'
import jsCookie from 'js-cookie'
import SettingAdd from './components/SettingAdd.vue'
import PermissionSet from './components/PermissionSet.vue'
// import SettingInfo from './components/SettingInfo.vue'
export default {
  components: {
    SettingAdd,
    PermissionSet,
    SettingInfo: () => import('./components/SettingInfo.vue') // 异步组件
  },
  data() {
    return {
      list: [],
      show: false,
      page: {
        page: 1, //	是	1	页码
        pagesize: +jsCookie.get('setting-pagesize') || 2, //	是	10	每页条数
        total: 100 // 总条数
      }
    }
  },
  async created() {
    this.getData()
  },
  methods: {
    async getData() {
      const res = await sysRole(this.page)
      console.log(res)
      this.list = res.data.rows
      this.page.total = res.data.total
    },
    // 页码改变
    handleCurrentChange(page) {
      console.log(page, this.page.page)
      this.getData()
    },
    // 页容量改变
    handleSizeChange(size) {
      console.log(size, this.page.pagesize)
      jsCookie.set('setting-pagesize', size)
      this.getData()
    },
    // 新增角色点击
    addEvent() {
      // 打开弹框
      this.$refs.add.isShow = true
      this.$refs.add.mode = 'add'
    },
    // 删除
    del(id) {
      this.$confirm('您确定删除该项吗？', '提示')
        .then(async() => {
          await sysRoleDelete(id)
          this.$message.success('删除成功')
          // 1：直接回第一页
          // this.page.page = 1
          // 2:判断是否页码>1且当前页只有一条数据
          if (this.page.page > 1 && this.list.length === 1) {
            this.page.page--
          }
          this.getData()
        })
        .catch(() => {})
    },
    // 修改
    edit(row) {
      // 打开弹框
      this.$refs.add.isShow = true
      this.$refs.add.mode = 'edit'
      // 数据回显
      this.$refs.add.form = JSON.parse(JSON.stringify(row))
      console.log(row)
    },
    // 分配权限点击
    setClick(id) {
      // ref打开弹框
      // this.$refs.set.isShow = true
      // v-model打开弹框
      // this.show = true
      // .sync打开弹框
      this.show = true
      // 调用获取权限数据方法
      this.$refs.set.getData()
      // 调用获取当前权限数据
      this.$refs.set.getRoleIds(id)
    }
  }
}
</script>
<style lang="scss" scoped>
.setting {
  padding: 20px;
}
</style>
